<template>
    <div class="infoWindow">
        <img class="lt" src="./radius.png" />
        <img class="rt" src="./radius.png" />
        <img class="lb" src="./radius.png" />
        <img class="rb" src="./radius.png" />
        <img class="t" src="./line.png" />
        <img class="b" src="./line.png" />
        <div class="content">
            <img src="./guanbi.png" class="close" @click="$emit('close')" />
            <slot></slot>
        </div>
    </div>
</template>
<style lang="scss">
.infoWindow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    padding: 4px 6px;

    .lt,
    .rt,
    .lb,
    .rb,
    .t,
    .b {
        position: absolute;
    }

    .t,
    .b {
        left: 24px;
        width: calc(100% - 48px);
    }

    .t,
    .lt,
    .rt {
        top: 0;
    }

    .b,
    .lb,
    .rb {
        bottom: 0;
    }

    .lt,
    .lb {
        left: 0;
    }

    .rt,
    .rb {
        right: 0;
    }

    .rt {
        transform: rotate(90deg);
    }

    .rb {
        transform: rotate(180deg);
    }

    .lb {
        transform: rotate(270deg);
    }

    .content {
        background: rgba(0, 35, 110, 0.7);
        border: 1px solid #1ff3f2;
        border-radius: 6px;
        padding: 16px;

        .close {
            position: absolute;
            right: 12px;
            top: 12px;
            cursor: pointer;
        }

        .title {
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #feffff;
        }
    }
}
</style>
  